<template>
  <div class="box1">
    <h2>学习信息</h2>
    <h3>学习名字:{{name}}</h3>
    <h3>学习地址:{{address}}</h3>
    <button @click="showschData" class="btn" > 展示学校信息</button>
  </div>
</template>

<script>
  export default {
    name:'School',
    data() {
      return {
          name:'宣化科技职业学院',
          address:'河北省张家口市宣化区'
      }
    },
    methods: {
      showschData(){
        alert(`${this.name} 坐落于 ${this.address},已经有好多年的历史了`)
      }
    },
  }
</script>

<style scoped>
  .box1{
    background-color: rgba(209, 8, 108, 0.573);
    padding: 10px;
    box-shadow:  0 0 10px;
  }

  .btn{
    background-color:#ccc;
    font-size:20px;
    box-shadow:  0 0 30px rgb(18, 7, 216);
  }
</style>